import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import queryString from 'query-string'
import Tabs, { Tab } from 'material-ui/Tabs'
import List from 'material-ui/List'
import { inject, observer } from 'mobx-react'
import { CircularProgress } from 'material-ui/Progress'
import { TopicStore } from '../../store/store'
import Container from '../layout/container'
import TopicListItem from './list.item'
import { tabs } from '../../util/variable-define'

@inject(stores => ({
  topicStore: stores.topicStore,
})) @observer
class TopicList extends React.Component {
  static contextTypes = {
    router: PropTypes.object,
  }

  constructor() {
    super()
    this.changeTab = this.changeTab.bind(this)
    this.listItemClick = this.listItemClick.bind(this)
  }

  componentDidMount() {
    const tab = this.getTab()
    this.props.topicStore.fetchTopics(tab)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.location.search !== this.props.location.search) {
      this.props.topicStore.fetchTopics(this.getTab(nextProps.location.search))
    }
  }

  bootstrap() {
    const query = queryString.parse(this.props.location.search)
    const { tab } = query
    return this.props.topicStore.fetchTopics(tab || 'share')
      .then(() => true)
      .catch(() => false)
  }

  getTab(search) {
    const searchClone = search || this.props.location.search
    const query = queryString.parse(searchClone)
    return query.tab || 'share'
  }

  changeTab(e, value) {
    this.context.router.history.push({
      pathname: '/list',
      search: `?tab=${value}`,
    })
  }

  /* eslint-disable */
  listItemClick(id) {
    this.context.router.history.push({
      pathname: `/detail/${id}`,
    })
  }
  /* eslint-enable */

  render() {
    const { topicStore } = this.props
    const topicList = topicStore.topics
    const syncingTopics = topicStore.syncing
    const query = this.getTab()

    return (
      <Container>
        <Helmet>
          <title>This is topic list</title>
          <meta name="description" content="This is description" />
        </Helmet>
        <Tabs value={query} onChange={this.changeTab}>
          {
            Object.keys(tabs).map(tab => <Tab key={tab} label={tabs[tab]} value={tab} />)
          }
        </Tabs>
        <List>
          {
            topicList.map(topic => (
              <TopicListItem
                key={topic.id}
                onClick={() => this.listItemClick(topic.id)}
                topic={topic}
              />
            ))
          }
        </List>
        {
          syncingTopics ?
            (
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                }}
              >
                <CircularProgress color="primary" size={100} />
              </div>
            ) : null
        }
      </Container>
    )
  }
}

// 验证mobx的数据都使用wrappedComponent
TopicList.wrappedComponent.propTypes = {
  topicStore: PropTypes.instanceOf(TopicStore).isRequired,
}

TopicList.propTypes = {
  location: PropTypes.object.isRequired,
}

export default TopicList
